<template>
	<view class="activity-config-list">
		<view class="activity-config-list-item" v-for="group in dataList" :key="group.activityId">
			<!-- 政策顶部信息 -->
			<view class="activity-config-list-item-top" @tap="openEdit(group)">
				<text :style="{color:getStyle(group).titleColor}">{{group.activityName}}</text>
				<view class="activity-config-list-item-top-right" v-if="!group.isOpenEdit">
					<text :style="{color:getStyle(group).tipColor}">{{getStyle(group).tipText}}</text>
					<xh-icon icon="icon_jiantou" :color="getStyle(group).tipColor"></xh-icon>
				</view>
			</view>
			<!-- 政策描述 -->
			<view class="activity-config-list-item-desc">
				<text :style="{color:getStyle(group).contentColor}">{{group.activityDesc}}</text>
			</view>
			<view class="activity-config-list-item-container" v-if="group.isOpenEdit || group.activityConfigStatus == '1'">
				<view v-for="item in group.activityRuleList" :key="item.ruleSeq">
					<!-- 多期政策配置内容区域 -->
					<view class="activity-config-list-item-container-group" v-if="item.activityRewardParam">
						<view class="activity-config-list-item-container-item activity-config-list-item-container-item-header">期数{{item.ruleSeq}}</view>
						<view class="activity-config-list-item-container-item" v-for="(subItem,index) in item.activityRewardParam" :key="index">
							<text>{{itemInfo(subItem).title}}</text>
							<view class="activity-config-list-item-container-item-right">
								<xh-input :placeholder="itemInfo(subItem).placeholder" :isLine="false" inputTextAlign="right" :isClear="false" padding="2px" :showRightIcon="false" :isSelect="!group.isOpenEdit" keyboardType="digit" fontSize="26rpx" v-model="subItem.inputValue"></xh-input>
								<text>{{itemInfo(subItem).unit}}</text>
							</view>
						</view>
					</view>
					<!-- 非多期政策配置内容区域 -->
					<view class="activity-config-list-item-container-item" v-else>
						<text>{{itemInfo(item).title}}</text>
						<view class="activity-config-list-item-container-item-right">
							<xh-input :placeholder="itemInfo(item).placeholder" :isLine="false" inputTextAlign="right" :isClear="false" padding="2px" :showRightIcon="false" :isSelect="!group.isOpenEdit" keyboardType="digit" v-model="item.inputValue"></xh-input>
							<text>{{itemInfo(item).unit}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="activity-config-list-item-btn-box" v-if="group.isOpenEdit">
				<text @tap="cancel(group)">取消</text>
				<view class="activity-config-list-item-btn-line"></view>
				<text @tap="save(group)">保存</text>
			</view>
		</view>
		<xh-empty minHeight="50vh" :show="dataList.length == 0"></xh-empty>
	</view>
</template>

<script setup>
	import { onMounted, ref } from 'vue'
	import { getAgentActivityList,updateAgentActivity } from '@/common/api/api.js'

	const props = defineProps({
		agentId: {
			type: String,
			default: ''
		},
		policyId: {
			type: Number,
			default: 0
		}
	})
	const dataList = ref([])

	// 处理样式
	const getStyle = (group) => {
		if (group.activityConfigStatus == '1') {
			return {
				titleColor: '#E01300',
				tipColor: '#5E56EE',
				tipText: '修改配置',
				contentColor: '#3C3C3C'
			}
		} else {
			return {
				titleColor: '#909399',
				tipColor: '#FF0203',
				tipText: '未配置，点击配置',
				contentColor: '#909399'
			}
		}
	}
	/**
	 * 处理内容显示,返回对象参数
	 * @param {string} title 标题
	 * @param {string} placeholder 输入框提示文字
	 * @param {string} unit 单位
	 */
	const itemInfo = (item) => {
		let data = {}
		console.log(item)
		const settleCycle_text = getSettleCycle_text(item)
		const rewardAmountType_text = getRewardAmountType_text(item)
		if (item.isMultiplePeriods) {
			// 多期
			const activityTypeText = item.activityType == '14' ? '服务费' : '通讯费'
			data.title = `${activityTypeText}${item.achieveAmount}元，奖励金额(${settleCycle_text})`
		} else {
			// 非多期
			let titleString = ''
			if (settleCycle_text != '') {
				titleString = `${rewardAmountType_text}(${settleCycle_text})`
			} else {
				titleString = rewardAmountType_text
			}
			let numberString = ''
			if (item.stageCount > 1) {
				numberString = `阶段${item.ruleSeq}`
			}
			data.title = `${numberString}${titleString}`
		}
		data.placeholder = `请输入(0~${item.maxRewardAmount})`
		if (item.rewardAmountType == '1') {
			data.unit = '%'
		} else if (item.rewardAmountType == '2') {
			data.unit = '‱'
		} else {
			data.unit = '元'
		}
		return data
	}
	// 开启编辑
	const openEdit = (group) => {
		dataList.value.forEach(obj => {
			if (obj.isOpenEdit) {
				obj.activityRuleList.forEach(item => {
					item.inputValue = item.rewardAmount
					if (item.activityRewardParam) {
						item.activityRewardParam.forEach(subItem => {
							subItem.inputValue = subItem.rewardAmount
						})
					}
				})
			}
			obj.isOpenEdit = false
		})
		group.isOpenEdit = true
	}
	// 取消
	const cancel = (group) => {
		group.isOpenEdit = false
		group.activityRuleList.forEach(item => {
			item.inputValue = item.rewardAmount
			if (item.activityRewardParam) {
				item.activityRewardParam.forEach(subItem => {
					subItem.inputValue = subItem.rewardAmount
				})
			}
		})
	}
	// 获取活动类型文字描述
	const getRewardAmountType_text = (item)=>{
		if (item.rewardAmountType == '0') {
			return '返现金额'
		} else if (item.rewardAmountType == '1') {
			return '收益比例'
		} else if (item.rewardAmountType == '2') {
			return '补贴比例'
		}
		return ''
	}
	// 获取结算周期文字描述
	const getSettleCycle_text = (item)=>{
		if (item.settleCycle == '01') {
			return '日结'
		} else if (item.settleCycle == '02') {
			return '周结'
		} else if (item.settleCycle == '03') {
			return '月结'
		}
		return ''
	}
	// 保存
	const save = async (item) => {
		console.log(item)
		if (item.activityRuleList.length == 0) {
			uni.$utils.showToast('保存失败，暂无活动信息')
			return
		}
		for (let i = 0; i < item.activityRuleList.length; i++) {
			const obj = item.activityRuleList[i]
			const activityTypeText = obj.activityType == '14' ? '服务费' : '通讯费'
			if(obj.activityRewardParam){
				// 多期通讯费/服务费
				const numberString = `期数${obj.ruleSeq}`
				if(obj.activityRewardParam.length == 0) {
					const msg = `保存失败，暂无${numberString}${activityTypeText}活动规则配置信息`
					uni.$utils.showToast(msg)
					return
				}
				for (let j = 0; j < obj.activityRewardParam.length; j++) {
					const subItem = obj.activityRewardParam[j]
					const value1 = parseFloat(subItem.inputValue) || 0
					const maxValue = parseFloat(subItem.maxRewardAmount) || 0
					if(uni.$uv.trim(subItem.inputValue) == ''){
						const msg = `请输入${numberString}${activityTypeText}${subItem.achieveAmount}元的奖励金额`
						uni.$utils.showToast(msg)
						return
					}
					else if (value1 > maxValue) {
						const msg = `${numberString}${activityTypeText}${subItem.achieveAmount}元的奖励金额上限为${subItem.maxRewardAmount}元`
						uni.$utils.showToast(msg)
						return
					}
					
				}
			}
			else{
				const value1 = parseFloat(obj.inputValue) || 0
				const maxValue = parseFloat(obj.maxRewardAmount) || 0
				// 非多期
				if(uni.$uv.trim(obj.inputValue,'all') == ''){
					const stateString = item.activityRuleList.length > 1 ? `阶段${obj.ruleSeq}` : ''
					const msg = `请输入${stateString}${getRewardAmountType_text(obj)}`
					uni.$utils.showToast(msg)
					return
				}
				else if (value1 > maxValue) {
					let msg = ''
					const stateString = item.activityRuleList.length > 1 ? `阶段${obj.ruleSeq}` : ''
					if(obj.rewardAmountType == '1'){
						msg = `${stateString}${getRewardAmountType_text(obj)}上限为${obj.maxRewardAmount}%`
					}
					else if(obj.rewardAmountType == '2'){
						msg = `${stateString}${getRewardAmountType_text(obj)}上限为${obj.maxRewardAmount}‱`
					}
					else{
						msg = `${stateString}${getRewardAmountType_text(obj)}上限为${obj.maxRewardAmount}元`
					}
					uni.$utils.showToast(msg)
					return
				}
			}
		}
		let params = {}
		let activityList = []
		params.agentId = props.agentId
		let activityDic = {}
		activityDic.activityId = item.activityId
		let activityRoleList = []
		item.activityRuleList.forEach(obj=>{
			let activityRoleDic = {}
			activityRoleDic.ruleSeq = obj.ruleSeq
			if(obj.activityRewardParam && obj.activityRewardParam.length > 0) {
				activityRoleDic.settleCycle = obj.settleCycle
				let activityRewardParam = []
				obj.activityRewardParam.forEach(subItem=>{
					let activityRewardParamDic = {}
					activityRewardParamDic.rewardAmount = subItem.inputValue
					activityRewardParamDic.achieveAmount = item.achieveAmount
					activityRewardParam.push(activityRewardParamDic)
				})
				activityRoleDic.activityRewardParam = activityRewardParam
			}
			else{
				activityRoleDic.rewardAmount = obj.inputValue
			}
			activityRoleList.push(activityRoleDic)
		})
		activityDic.activityRuleList = activityRoleList
		activityList.push(activityDic)
		params.activityInfoList = activityList
		await updateAgentActivity(params)
		uni.$utils.showToast('保存成功',1000,()=>{
			getAgentActivityListData()
		})
	}
	// 获取代理商活动列表
	const getAgentActivityListData = async () => {
		let params = {}
		if (props.agentId) {
			params.agentId = props.agentId
		}
		if (props.policyId) {
			params.policyId = props.policyId
		}
		const res = await getAgentActivityList(params)
		dataList.value = res.result
		dataList.value.forEach(group => {
			group.isOpenEdit = false
			group.isCanEdit = true
			if (props.agentId) {
				group.agentId = props.agentId
			}
			group.activityRuleList.forEach(item => {
				item.inputValue = item.rewardAmount ?? ''
				item.stageCount = group.activityRuleList.count
				item.activityType = group.activityType
				if (item.activityRewardParam) {
					// 是否是多期通讯费/服务费
					item.isMultiplePeriods = true
					item.activityRewardParam.forEach(subItem => {
						subItem.inputValue = subItem.rewardAmount ?? ''
						subItem.settleCycle = item.settleCycle
						subItem.rewardAmountType = item.rewardAmountType
						subItem.ruleSeq = item.ruleSeq
						subItem.isMultiplePeriods = item.isMultiplePeriods
						subItem.activityType = item.activityType
					})
				} else {
					item.isMultiplePeriods = false
				}
			})
		})
	}
	onMounted(() => {
		console.log('组件挂载')
		getAgentActivityListData()
	})
</script>

<style lang="scss" scoped>
	.activity-config-list {
		padding-bottom: 100rpx;

		.activity-config-list-item {
			background-color: #fff;
			border-radius: 20rpx;
			padding-top: 30rpx;
			margin-bottom: 30rpx;
			width: 100%;

			.activity-config-list-item-top {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				padding: 0 30rpx;

				.activity-config-list-item-top-right {
					display: flex;
					align-items: center;
					color: #FF0203;
					font-size: 24rpx;
					margin-left: 30rpx;
					flex-shrink: 0;
				}
			}

			.activity-config-list-item-desc {
				margin-top: 20rpx;
				font-size: 24rpx;
				padding: 0 30rpx 30rpx;
			}

			.activity-config-list-item-container {
				.activity-config-list-item-container-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-top: 1px solid #eee;
					padding: 0 30rpx;
					font-size: 26rpx;

					.activity-config-list-item-container-item-right {
						display: flex;
						align-items: center;
						font-size: 26rpx;
						flex: 1;
						margin-left: 30rpx;
					}

				}

				.activity-config-list-item-container-item-header {
					padding: 30rpx;
				}
			}

			.activity-config-list-item-btn-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-top: 1px solid #eee;

				text {
					flex: 1;
					text-align: center;
					padding: 30rpx 0;
				}

				text:nth-of-type(2) {
					color: $xh-theme-color;
					border-left: 1px solid #eee;
				}
			}
		}
	}
</style>